<template>
    <div class="orders">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/menu/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/menu/">订单管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 搜索 -->
            <div class="search">
                <el-input v-model="kw" placeholder="请输入内容" clearable @clear="clearsearch"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>

            </div>
            <!-- 表格 -->
            <el-table :data="tableData" border style="width: 100%;">
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column prop="order_number" label="订单编号" width="400px">
                </el-table-column>
                <el-table-column prop="order_price" label="订单价格">
                </el-table-column>
                <el-table-column prop="is_send" label="是否付款">
                    <template slot-scope="scope">
                        <el-tag type="success" v-show="scope.row.is_send== '是'">已付款</el-tag>
                        <el-tag type="danger" v-show="scope.row.is_send== '否'">未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货">
                </el-table-column>
                <el-table-column prop="update_time" label="下单时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template>
                        <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible=true"></el-button>
                        <el-button type="success" icon="el-icon-location" @click="mapdata()"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[3,5,7,10]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="this.total">
            </el-pagination>
        </el-card>
        <!-- 修改地址的 -->
        <el-dialog title="修改地址" :visible.sync="dialogFormVisible">
            <el-form label-width="80px">
                <el-form-item label="省/市区县">
                    <el-cascader v-model="value" :options="options"
                        :props="{ expandTrigger: 'hover' ,children:'children',label:'label',value:'value' }"
                        @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 查看物流进度的 -->
        <el-dialog title="查看物流进度" :visible.sync="dialogFormVisible1">
            <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(activity, index) in mapdate.data" :key="index" :timestamp="activity.time">
                    {{activity.context}}
                </el-timeline-item>
            </el-timeline>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import citys from '../assets/citydata'
export default {
    data() {
        return {
            dialogFormVisible: false,
            value: [],
            options: [],
            dialogFormVisible1: false,
            reverse: false,
            mapdate: {
                "data": [
                    {
                        "time": "2018-05-10 09:39:00",
                        "ftime": "2018-05-10 09:39:00",
                        "context": "已签收,感谢使用顺丰,期待再次为您服务",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 08:23:00",
                        "ftime": "2018-05-10 08:23:00",
                        "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 07:32:00",
                        "ftime": "2018-05-10 07:32:00",
                        "context": "快件到达 [北京海淀育新小区营业点]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 02:03:00",
                        "ftime": "2018-05-10 02:03:00",
                        "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 23:05:00",
                        "ftime": "2018-05-09 23:05:00",
                        "context": "快件到达 [北京顺义集散中心]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 21:21:00",
                        "ftime": "2018-05-09 21:21:00",
                        "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 13:07:00",
                        "ftime": "2018-05-09 13:07:00",
                        "context": "顺丰速运 已收取快件",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 12:25:03",
                        "ftime": "2018-05-09 12:25:03",
                        "context": "卖家发货",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 12:22:24",
                        "ftime": "2018-05-09 12:22:24",
                        "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
                        "location": ""
                    },
                    {
                        "time": "2018-05-08 21:36:04",
                        "ftime": "2018-05-08 21:36:04",
                        "context": "商品已经下单",
                        "location": ""
                    }
                ],
                "meta": { "status": 200, "message": "获取物流信息成功！" }
            },
            kw: '',
            tableData: [],
            rolelist: [],
            user: '',
            role: '',
            form: {
                username: '',
                password: '',
                email: '',
                mobile: '',
                region: '',
            },
            queryInfo: {
                query: '',
                pagenum: 1,
                pagesize: 10
            },
            total: 0,

            id: 0,
            uid: 0,
        }
    },
    mounted() {
        this.getlist()
        this.options.push(...citys)
        // console.log(this.mapdate, '@@@');

    },
    methods: {
        // 请求数据
        async getlist() {
            var res = await this.axios({
                url: '/v1/orders',
                params: this.queryInfo
            })
            // console.log(res);
            this.tableData = res.data.data.goods
            // console.log(this.tableData);
            this.total = res.data.data.total
            this.tableData.forEach(item=>{
               let smin = new Date(item.update_time*1000)
                let y = smin.getFullYear()
                var obj ={
                    m:smin.getMonth()+1,
                    d:smin.getDate(),
                    h:smin.getHours(),
                    min:smin.getMinutes(),
                    s:smin.getSeconds(),
                }
                for(let i in obj){
                    obj[i] = obj[i]<10? "0"+obj[i] : obj[i]
                }
             item.update_time = `${y}-${obj.m}-${obj.d} ${obj.h}:${obj.min}:${obj.s}`
            //  console.log(item.upd_time);
            })
        },
        // 分页
        handleSizeChange(val) {
            this.queryInfo.pagesize = val
            // console.log(this.queryInfo.pagesize);
            this.getlist()
        },
        handleCurrentChange(val) {
            this.queryInfo.pagenum = val
            // console.log(this.queryInfo.pagenum);
            this.getlist()
        },
        //       // 搜索
        async search() {
            // console.log(this.kw);
            var res = await this.axios({
                url: '/v1/orders',
                params: {
                    pagesize: this.queryInfo.pagesize,
                    pagenum: this.queryInfo.pagenum,
                    query: this.kw
                }
            })
            // console.log(res, 'search');
            this.tableData = res.data.data.goods
            this.total = res.data.data.total
            this.getlist()
        },
        // 清空搜索框
        clearsearch() {
            this.queryInfo.query = ''
            this.getlist()
        },
        handleChange() {  },
        mapdata() {
            this.dialogFormVisible1 = true
            this.$message.success('获取物流信息成功')
          
        }

    }
}
</script>
<style scoped >
.box-card {
    width: 100%;
    margin-top: .9375rem;
}

.search {
    display: flex;

}

.search .el-input__inner {
    width: 300px;
}

.search .el-input {
    width: 300px;
}

.el-form-item {
    width: 100%;
}

.el-input__inner .el-input {
    width: 100%;
}

.el-cascader {
    width: 100%;
}
</style>